<!--
为了避免视觉上的错乱，大部分板式都用 c-hide 样式隐藏，删除这个样式，既可显示板式。
-->
<template>
	<view class="content">
		<!-- 全屏界面 -->
		<!-- 全屏元素 -->
		<view class="full-screen-page" id="full-screen">
			<!-- ***加载提示*** -->
			<view class="window-content normal-window">
				<!-- 简单内容，高度随内容变动 -->
				<view class="loading-content">
					<icon type="" class="imgIcon icon-cigar-loading"/>
					正在加载, 请稍候
				</view>
			</view>
			<!-- ***普通窗口*** -->
			<view class="window-content normal-window c-hide">
				<!-- 顶栏 -->
				<view class="window-header">
					<text class="window-title">窗口标题</text>
				</view>
				<!-- 固定高度内容，内容可滚动 -->
				<view class="text-content">
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
				</view>
				<!-- 简单内容，高度随内容变动 -->
				<view class="simple-content c-hide">
					<input class="window-input" focus placeholder="自动获得焦点" />
				</view>
				<!-- 底栏 -->
				<view class="window-floor">
					<button class="half-btn btn-normal">取消</button>
					<button class="half-btn btn-important">确认</button>
				</view>
			</view>

			<!-- ***庆祝窗口*** -->
			<view class="window-content celebrate-window c-hide">
				<!-- 顶栏 -->
				<view class="window-header">
					<icon class="fontIcon icon-logo" type=""></icon>
				</view>
				<!-- 文字内容 -->
				<view class="text-content ">
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
				</view>
				<!-- 贺卡 -->
				<view class="card-content c-hide">
					生日贺卡
				</view>
				<!-- 底栏 -->
				<view class="window-floor">
					<!-- 提示文本 -->
					<view class="tip c-hide">窗口10秒后关闭</view>
					<!-- 按钮组 -->
					<view class="buttons">
						<button class="half-btn btn-important">谢谢</button>
						<button class="half-btn btn-normal">发帖求祝福</button>
					</view>
				</view>
			</view>
		</view>
		</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				value: 2
			}
		},
		methods: {
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
			}
		}
	}
</script>